<script setup>
import { cloneDeep } from 'lodash-es';
import { useRequest, useWatch, useDownload, useResetForm } from '@/hooks';
import { useSelectIns } from '@/store/zdwh.js';
import { useTitleChange } from '../hooks.js';
import { getMeterTypeList, getMeterList, delMeter } from '@/api/index.js';
import { Message, MessageBox } from 'element-ui';
import { TableList } from '@/components/MainComponents.js';
import DialogMeter from './DialogMeter.vue';
import DialogDMImport from './DialogDMImport.vue';

const selectInsStore = useSelectIns();
const queryForm = ref(null);
const queryData = ref({
  deviceType: null,
  identification: null,
  enterpriseCode: null,
  pageNum: 1,
  pageSize: 10,
});
const dialogMeter = ref(null);
const dialogDMImport = ref(null);
const [meterTitle, setMeterTitle] = useTitleChange();
const editData = ref(null);

const handleEdit = row => {
  setMeterTitle('编辑');
  dialogMeter.value.visible = true;
  editData.value = cloneDeep(row);
};
const handleDelete = row => {
  MessageBox.confirm('删除后不可找回，是否确认删除', '提示', {
    confirmButtonText: '是',
    cancelButtonText: '否',
    type: 'warning',
  }).then(() => {
    runDel({ deviceCode: row.deviceCode });
  });
};
const tableBoxRef = ref(null);
const tableHeight = ref(null);
const columnObj = {
  index: true,
  columnData: [
    { text: true, prop: 'deviceViewId', label: '计量表编号' },
    { text: true, prop: 'deviceName', label: '计量表名称' },
    { text: true, prop: 'deviceTypeName', label: '计量表类型' },
    { text: true, prop: 'position', label: '计量表安装位置' },
    { text: true, prop: 'energyType', label: '计量能源类型' },
    { text: true, prop: 'energyUnit', label: '计量单位' },
    { text: true, prop: 'createTime', label: '添加时间' },
    {
      label: '操作',
      operations: [
        {
          type: 'text',
          label: '编辑',
          buttonClick: handleEdit,
        },
        {
          type: 'text',
          label: '删除',
          buttonClick: handleDelete,
        },
      ],
    },
  ],
};

const handleQuery = () => {
  queryData.value.pageNum = 1;
  run(queryData.value);
};
const resetQuery = () => {
  useResetForm(queryForm);
  queryData.value.pageSize = 10;
  handleQuery();
};
const handleAdd = () => {
  setMeterTitle('新增');
  dialogMeter.value.visible = true;
};
const handleImport = () => {
  dialogDMImport.value.visible = true;
};
const handleDownload = () => {
  useDownload('/energyservice/device/templateDownload', {}, '计量表模板.xlsx');
};

const handleSuccess = bool => {
  if (bool) {
    run(queryData.value);
  }
};
const getList = e => {
  queryData.value.pageNum = e.page;
  queryData.value.pageSize = e.limit;
  run(queryData.value);
};

const [meterTypeList, ,] = useRequest(getMeterTypeList, { defaultParams: [{}] });
const [res, loading, run] = useRequest(getMeterList, { manual: true });
const [, , runDel] = useRequest(delMeter, {
  manual: true,
  onSuccess: res => {
    if (res.code === 200) {
      Message.success(res.msg);
      resetQuery();
    }
  },
});

onMounted(() => {
  nextTick(() => {
    tableHeight.value = tableBoxRef.value.clientHeight - 139;
  });
});
useWatch(
  () => selectInsStore.selectIns,
  n => {
    if (n?.enterpriseCode) {
      useResetForm(queryForm);
      queryData.value.enterpriseCode = n.enterpriseCode;
      queryData.value.pageNum = 1;
      queryData.value.pageSize = 10;
      run(queryData.value);
    }
  },
  { deep: true, immediate: true },
);
</script>

<template>
  <div class="u-w100 u-h100">
    <el-form ref="queryForm" :model="queryData" inline class="u-base-fg u-p20 u-mb20">
      <el-form-item label="表类型" prop="deviceType">
        <el-select v-model="queryData.deviceType" placeholder="请选择表类型" size="small">
          <el-option
            v-for="item in meterTypeList ?? []"
            :key="item.deviceTypeId"
            :label="item.deviceTypeName"
            :value="item.deviceTypeId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="计量表ID" prop="identification">
        <el-input v-model="queryData.identification" placeholder="请输入计量表ID或名称" size="small"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
        <el-button type="primary" size="small" plain @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div ref="tableBoxRef" class="u-base-fg u-p20 MeasureInfo-table">
      <div class="u-df-spb u-mb20">
        <span class="u-fs16 u-prim-text">计量表信息</span>
        <div>
          <el-button type="primary" size="small" plain @click="handleAdd">添加计量表</el-button>
          <el-button type="primary" size="small" plain @click="handleImport">导入计量表</el-button>
          <el-button type="primary" size="small" plain @click="handleDownload">下载模板</el-button>
        </div>
      </div>
      <TableList
        v-loading="loading"
        :total="res?.total ?? 0"
        :height="tableHeight"
        :tableData="res?.rows ?? []"
        :pageObj="queryData"
        :columObj="columnObj"
        @getList="getList"
      ></TableList>
    </div>
    <DialogMeter
      ref="dialogMeter"
      :title="meterTitle"
      :typeList="meterTypeList"
      :editData="editData"
      @success="handleSuccess"
    />
    <DialogDMImport ref="dialogDMImport" :typeList="meterTypeList" @success="handleSuccess" />
  </div>
</template>

<style lang="scss" scoped>
.MeasureInfo-table {
  height: calc(100% - 100px);
}
:deep(.el-form-item) {
  margin-bottom: 0;
  .el-form-item__content {
    height: 40px;
    line-height: 40px;
  }
}
</style>
